<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式代码初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        body{
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', Arial, 'sans-serif';
            background: #f5f5f5;
        }
        /* 代码主体 */
        .box{
            width: 1190px;
            height: 544px;
            /* box-shadow: 0 0 3px #f00; */
            margin: 10px auto 0;
        }
        /* 上-导航 */
        .nav{
            height: 44px;
            line-height: 44px;
            /* background: lightblue; */
            margin-bottom: 10px;
            font-size: 0;
        }
        .nav h1{
            float: left;
            margin-right: 50px;
            color: #101010;
            font-size: 28px;
            font-weight: normal;
        }
        .nav a{
            color: #666;
            font-size: 14px;
            margin-right: 30px;
            border-bottom: 3px solid transparent;
            line-height: 24px;
            display: inline-block;
        }
        .nav a.active,
        .nav a:hover{
            border-bottom-color:#00C777;
        }

        /* 下-内容 */
        .content{
            height: 490px;
            /* background: lightcoral; */
        }
        /* 内容-左侧 */
        .content_left{
            width: 948px;
            height: inherit;
            /* background-color: lemonchiffon; */
            float: left;
        }
        /* 列表项 */
        .content_left li{
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
            float: left;
            /* 鼠标变手 */
            cursor: pointer;
        }
        /* 鼠标悬停状态变化 */
        .content_left li img{
            transition: all .2s;
        }
        .content_left li:hover img{
            transform: scale(1.3);
        }
        .content_left li:nth-of-type(1){
            width: 464px;
            height: 235px;
        }
        /* 变量n，n从0开始算 */
        /* .content_left li:nth-of-type(2),
        .content_left li:nth-of-type(3),
        .content_left li:nth-of-type(4),
        .content_left li:nth-of-type(5),
        .content_left li:nth-of-type(6),
        .content_left li:nth-of-type(7), */
        .content_left li:nth-of-type(n+2){
            width: 222px;
            height: 235px;
        }
        /* 前3个li列表项添加下外边距 */
        .content_left li:nth-of-type(-n+3){
            margin-bottom: 20px;
        }
        /* 右外边距指定个别元素进行添加 */
        .content_left li:nth-of-type(1),
        .content_left li:nth-of-type(2),
        .content_left li:nth-of-type(4),
        .content_left li:nth-of-type(5),
        .content_left li:nth-of-type(6){
            margin-right: 20px;
        }
        /* 列表--第一项 */
        .content_left li:nth-of-type(1) img{
            display: block;
            width: inherit;
            height: inherit;
        }
        .content_left li:nth-of-type(1){
            position: relative;
            overflow: hidden;
        }
        .content_left li:nth-of-type(1) .mask{
            padding: 9px 10px;
            height: 51px;
            /* 绝对定位 */
            position: absolute;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,.56);
            width: 444px;
        }
        .content_left li:nth-of-type(1) h2{
            line-height: 24px;
            font-size: 18px;
            color: #fff;
            font-weight: normal;
            /* 单行文本省略号 */
            white-space: nowrap;/*文本不换行*/
            overflow: hidden;/*超出隐藏*/
            text-overflow: ellipsis;/*边界文本呈现省略号*/
            margin-bottom: 5px;
        }
        .content_left li:nth-of-type(1) div{
            font-size: 14px;
            color: #ccc;
            line-height: 22px;
        }
        /* 注意：后低元素选择器具有穿透性 */
        .content_left li:nth-of-type(1) div>span{
            float: right;
        }
        .content_left li:nth-of-type(1) div>span>span:first-child{
            color: #ff685d;
        }
        .content_left li:nth-of-type(1) div>span>span:last-child{
            color: #fff;
            font-size: 12px;
        }
        /* 列表-其余项-上 */
        .content_left li:nth-of-type(n+2) .img_box{
            height: 140px;
            /* background: lawngreen; */
            /* 相对定位 */
            position: relative;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        .content_left li:nth-of-type(n+2) .img_box img{
            width: 100%;
            height: inherit;
            display: block;
        }
        .content_left li:nth-of-type(n+2) .img_box img+span{
            position: absolute;
            top: 0;
            left: 0;
            width: 54px;
            height: 22px;
            text-align: center;
            line-height: 22px;
            color: #fff;
            font-size: 12px;
            background: #5589BE;
        }
        /* 列表-其余项-下 */
        .content_left li:nth-of-type(n+2) .item_box{
            width: 200px;
            padding:9px  11px 7px 11px;
            height: 79px;
        }
        .content_left li:nth-of-type(n+2) .item_box h2{
            line-height: 22px;
            font-size: 16px;
            color: #101010;
            font-weight: normal;
            margin-bottom: 10px;
            /* 多行省略号 */
            display:-webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/
            -webkit-line-clamp: 2;/*表示第几行裁剪*/
            -webkit-box-orient:vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
            overflow: hidden;
        }
        .content_left li:nth-of-type(n+2) .item_box>div{
            line-height: 25px;
            font-size: 12px;
            color: #999;
        }
        .content_left li:nth-of-type(n+2) .item_box>div>span{
            float: right;
            height: 25px;
        }
        .content_left li:nth-of-type(n+2) .item_box>div>span>span:first-child{
            color: #ff685d;
            font-size: 14px;
            margin-right: 2px;
        }


        /* 内容-右侧 */
        .content_right{
            display: block;
            width: 222px;
            height: inherit;
            float: right;
            /* 相对定位 */
            position: relative;
        }
        .content_right img{
            display: block;
            width: inherit;
            height: inherit;
        }
        .content_right span{
            /* 面试考点：span脱离文档流后浏览器会将其解析为行内块级元素，此时可以直接设置宽高 */
            position: absolute;
            left: 0;
            width: 54px;
            bottom: 0;
            height: 22px;
            line-height: 22px;
            background: rgba(6, 6, 6, .53);
            text-align: center;
            font-size: 12px;
            color: rgba(238, 238, 238, 53);
        }
        /* 关闭按钮 */
        .content_right button{
            background: transparent;
            border: none;
            position: absolute;
            right: 10px;
            top: 10px;
            color: #999;
            cursor: pointer;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 容器盒子 -->
    <div class="box">
        <!-- 上-导航 -->
        <div class="nav">
            <h1>周边游乐</h1>
            <a href="" class="active">热推</a>
            <a href="">廊坊</a>
            <a href="">天津</a>
            <a href="">保定</a>
            <a href="">唐山</a>
            <a href="">张家口</a>
            <a href="">承德</a>
        </div>
        <!-- 下-内容 -->
        <div class="content">
            <!-- 内容-左侧 -->
            <ul class="content_left">
                <li>
                    <a href="http://www.baidu.com">
                        <img src="./imgs/01.png" alt="">
                        <!-- 遮罩 -->
                        <div class="mask">
                            <h2>清东陵+景区环保车1日游 参观清朝帝王陵墓建筑群赛事加u飒飒飒飒</h2>
                            <div>
                                北京-北京
                                <span>
                                    <span>￥258</span>
                                    <span>起</span>
                                </span>
                                <!-- 
                                    注意：文本类块级元素不能包含文本类块级元素
                                    <p>
                                        <p>1</p>
                                        <p>2</p>
                                    </p>
                                -->
                                
                            </div>
                        </div>
                    </a>
                </li>
                <!-- 注意：下面的li列表项均需要用a标签进行包裹 -->
                <li>
                    <a href="">
                        <!-- 上 -->
                        <div class="img_box">
                            <img src="./imgs/02.png" alt="">
                            <span>跟团游</span>
                        </div>
                        <!-- 下 -->
                        <div class="item_box">
                            <h2>
                                丰宁坝上草原+2H越野深度游+闪电湖+草原嘉年华双啥啥叫撒娇和
                            </h2>
                            <div>
                                北京-张家口
                                <span><span>￥250008</span><span>起</span></span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <!-- 上 -->
                        <div class="img_box">
                            <img src="./imgs/03.png" alt="">
                            <span>跟团游</span>
                        </div>
                        <!-- 下 -->
                        <div class="item_box">
                            <h2>
                                丰宁坝上草原+2H越野深度游+闪电湖+草原嘉年华双啥啥叫撒娇和
                            </h2>
                            <div>
                                北京-张家口
                                <span><span>￥250008</span><span>起</span></span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <!-- 上 -->
                        <div class="img_box">
                            <img src="./imgs/04.png" alt="">
                            <span>跟团游</span>
                        </div>
                        <!-- 下 -->
                        <div class="item_box">
                            <h2>
                                丰宁坝上草原+2H越野深度游+闪电湖+草原嘉年华双啥啥叫撒娇和
                            </h2>
                            <div>
                                北京-张家口
                                <span><span>￥250008</span><span>起</span></span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <!-- 上 -->
                        <div class="img_box">
                            <img src="./imgs/05.png" alt="">
                            <span>跟团游</span>
                        </div>
                        <!-- 下 -->
                        <div class="item_box">
                            <h2>
                                丰宁坝上草原+2H越野深度游+闪电湖+草原嘉年华双啥啥叫撒娇和
                            </h2>
                            <div>
                                北京-张家口
                                <span><span>￥250008</span><span>起</span></span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                   <a href="">
                        <!-- 上 -->
                        <div class="img_box">
                            <img src="./imgs/06.png" alt="">
                        </div>
                        <!-- 下 -->
                        <div class="item_box">
                            <h2>
                                丰宁坝上草原+2H越野深度游+闪电湖+草原嘉年华双啥啥叫撒娇和
                            </h2>
                            <div>
                                北京-张家口
                                <span><span>￥250008</span><span>起</span></span>
                            </div>
                        </div>
                   </a>
                </li>
                <li>
                    <a href="">
                        <!-- 上 -->
                        <div class="img_box">
                            <img src="./imgs/01.png" alt="">
                            <span>跟团游</span>
                        </div>
                        <!-- 下 -->
                        <div class="item_box">
                            <h2>
                                丰宁坝上草原+2H越野深度游+闪电湖+草原嘉年华双啥啥叫撒娇和
                            </h2>
                            <div>
                                北京-张家口
                                <span><span>￥250008</span><span>起</span></span>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
            <!-- 内容-右侧 -->
            <a class="content_right" href="#">
                <img src="./imgs/07.png" alt="">
                <!-- 标识 -->
                <span>广告</span>
                <!-- 按钮 -->
                <button>&times;</button>
            </a>
        </div>
    </div>
</body>
</html>